import axios from 'axios'
import { ref } from 'vue'

/**
 * 定义 API 返回的错误类型。
 */
export interface ErrorResponse {
  /**
   * 错误码，业务相关，与 HTTP 状态码不一定相同
   */
  code: number

  /**
   * 错误的简短描述
   */
  message: string

  /**
   * 更详细的错误信息
   */
  errors?: any[]
}

/**
 * 通用错误处理逻辑。使用了 Vue 3 的 Composition API。
 *
 * @see https://v3.cn.vuejs.org/guide/composition-api-introduction.html
 * @returns 用于展示错误的响应式变量 errors，与用于接受错误的 errorHandler
 */
export function useErrors() {
  // 储存错误信息
  const errors = ref<ErrorResponse | string>('')

  // 处理传入的错误，类型可能为 API 的 4xx 5xx 错误响应，或者 JS 自身的异常
  function errorHandler(err: unknown) {
    if (axios.isAxiosError(err)) {
      const res = err?.response?.data
      if (res) {
        errors.value = res as ErrorResponse
        return
      }
    }

    // 如果是普通异常则展示异常信息
    if (err instanceof Error) {
      errors.value = err.message
    }
  }

  return {
    errors,
    errorHandler
  }
}
